<div id="addressApp">
<h1 class="page-header">地址管理</h1>

    <div class="form-horizontal row" style="margin: 30px 0;">
        <label class="col-sm-1 control-label">姓名</label>
        <div class="col-sm-2">
            <input v-model.trim="query.name" type="text" class="form-control"  placeholder="输入名称">
        </div>

        <label class="col-sm-1 control-label">电话</label>
        <div class="col-sm-2">
            <input v-model.trim="query.phone" type="text" class="form-control"  placeholder="输入电话">
        </div>


        <div class="col-sm-1">
            <div @click="getList(1)" class="btn btn-primary" >查询</div>
        </div>
    </div>


    <div class="table-responsive">
        <table class="table table-striped">
            <thead>
            <tr>


                <th>openid</th>
                <th>姓名</th>
                <th>电话</th>
                <th>地址</th>

            </tr>
            </thead>
            <tbody>

            <tr v-for="(a,index) in list">


                <td>{{a.openid}}</td>
                <td>{{a.name}}</td>
                <td>{{a.phone}}</td>
                <td>{{a.addr}}</td>
                <td>
                    <div @click="del(a.id)" class="btn btn-danger">删除</div>
                </td>

            </tr>

            </tbody>
        </table>
        <div v-if="list.length == 0">无数据</div>
        <nav v-if="list.length != 0" aria-label="Page navigation">
            <ul class="pagination pagination-lg">
                <li :class="{disabled :  pageNum == 1}" @click="getList(pageNum - 1)">
                    <a   aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
                <li v-for="p in page" :class="{active : p == pageNum}" @click="getList(p)"><a >{{p}}</a></li>

                <li :class="{disabled :  pageNum == page[page.length-1]}" @click="getList(pageNum + 1)">
                    <a  aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
            </ul>
        </nav>
    </div>
</div>